<script xmlns:el-row="http://www.w3.org/1999/html">
import {defineComponent, toRefs, reactive, onMounted} from 'vue';
import Sidebar from '../common/Sidebar.vue';
import Header from '../common/Header.vue';
import axios from 'axios';
import hotel from "@/views/hotel/Hotel.vue";
import {Plus, Search} from "@element-plus/icons-vue"; // 引入axios库

export default defineComponent({
  name: "Agency",
  computed: {
    Search() {
      return Search
    }
  },
  components: {
    Plus,
    Sidebar,
    Header,
  },
  data() {
    return {
      agencyList : [],//旅游社列表
      editingAgencyRow: null,
      searchQuery: '',
    }
  },
  watch: {
    // 监听searchQuery的变化
    searchQuery(newValue, oldValue) {
      // 当searchQuery的值变化时，调用这个函数
      // 你可以在这里执行任何你需要的逻辑
      this.searchAgency(newValue);
      console.log(newValue);
    },
  },
  mounted() {
    // 在组件挂载时发送请求获取商品信息
    this.fetchAgency();
  },
  methods:{
    async searchAgency(keyword){
      await axios.get(`http://localhost:8083/TripTeam/searchTripTeamByname?keyword=${keyword}`).then(response => {
        this.agencyList = response.data;
        console.log(this.agencyList);
      });
    },

    async deleteAgency(id){
      await axios.post(`http://localhost:8083/TripTeam/deleteTripTeam`,{
        teamid:id
      },{
        headers: {
          'Content-Type':'application/json',
        },
      });
      this.fetchAgency();
    },

    addRow() {
      const newRow = {
        teamid: parseInt(this.agencyList[this.agencyList.length-1].teamid)+1,// 根据实际情况，可能需要生成一个唯一的ID
        teamname: '空',
        intelligence: '空',
        credit:'60',
      };
      this.agencyList.push(newRow);
      this.editingAgencyRow = this.agencyList.length-1;
      axios.post(`http://localhost:8083/TripTeam/insertTripTeam`, {
        teamname:newRow.teamname,
        teamid: newRow.teamid,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },

    handleAgencyEdit(index) {
      this.editingAgencyRow = index;
    },
    async handleAgencyEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingAgencyRow = null;
      console.log(this.agencyList[index]);
      await axios.post("http://localhost:8083/TripTeam/updateTripTeam", {teamid: this.agencyList[index].teamid,
        teamname: this.agencyList[index].teamname,
        intelligence: this.agencyList[index].intelligence,
        credit: this.agencyList[index].credit,
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('景区信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新景区信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });
    },
    viewAgency(id) {
      console.log(id);
      this.$router.push(`/travelAgency/detailTravelAgency/${id}`);
    },
    fetchAgency() {

      axios.get('http://localhost:8083/TripTeam/TripTeam') // 根据实际情况修改接口地址
          .then(response => {
            this.agencyList = response.data;
          })
          .catch(error => {
            console.error('获取旅游社列表失败:', error);
          });
    },
  },
})

</script>

<template>
  <body>
  <el-col style="height: 100%;">
    <Header />
    <el-row style="height: 100%;">
      <el-col :span="3" style="height: 100%;">
        <Sidebar />
      </el-col>
      <el-col :span="21" style="height: 100%; text-align: center;overflow-y: auto;" >
        <div class="background-image">
          <h1 style="display: flex;justify-content: center">所有旅行社</h1>
          <el-card>
            <el-input type="text" v-model="searchQuery" placeholder="输入名称" style="width: 300px " :suffix-icon="Search"></el-input>
        <el-table :data="agencyList" stripe height="250" style="width: 100%">
          <el-table-column fixed prop="teamid" label="编号" width="150" align="center"/>
          <el-table-column prop="teamname" label="旅行社名" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAgencyRow === scope.$index" v-model="scope.row.teamname" @blur="handleAgencyEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAgencyEdit(scope.$index)">
                {{ scope.row.teamname }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="intelligence" label="旅行社信息" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAgencyRow === scope.$index" v-model="scope.row.intelligence" @blur="handleAgencyEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAgencyEdit(scope.$index)">
                {{ scope.row.intelligence }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="credit" label="信誉分" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAgencyRow === scope.$index" v-model="scope.row.credit" @blur="handleAgencyEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAgencyEdit(scope.$index)">
                {{ scope.row.credit }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="viewAgency(scope.row.teamid)">详情</el-button>
              <el-button link type="primary" @click="deleteAgency(scope.row.teamid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <template #footer><el-button color="#9d2933" circle size="large" plain @click="addRow" ><el-icon><plus/></el-icon></el-button></template>
        </el-card>
        </div>
      </el-col>
    </el-row>
  </el-col>
  </body>
</template>

<style scoped>
@import "../../assets/css/global.css";
.background-image {
  height: 100vh; /* 使容器高度占满视口 */
  display: flex; /* 使用 flexbox 居中内容 */
  flex-direction: column;
  align-items: center;
  background-image: url('/bg1.png');
  background-size: cover; /* 覆盖整个容器 */
  background-position: center; /* 图片居中 */
}
</style>